<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/public.css">
  <link rel="stylesheet" href="../css/register.css">
  <script src="../js/vue.js"></script>
  <script src="../js/axios.js"></script>
  <script src="../js/jquery-1.10.1.min.js"></script>
</head>
<style>
  .error {
    color: red
  }

  .success {
    color: green;
  }
</style>

<body>
  <!-- 外部引入 -->
  <div class="header"></div>

  <div class="content">
    <div class="wrap">
      <div class="layout">

        <div class="regBox">
          <h5 class="register__msg">
            <span>欢迎加入</span>
            <img class="msgImg" src="../images/fila_blue_150.png" alt="">
          </h5>
          <div class="register_user">
            <input type="text" name="phone" id="phone" v-model="phone" placeholder="手机号码">
          </div>
          <div class="register_pwd">
            <input type="text" name="pwd" id="pwd" v-model="pwd" placeholder="登录密码">
          </div>
          <div class="register_repwd">
            <input type="text" name="pwd" id="repwd" v-model="repwd" placeholder="确认密码">

          </div>
          <div class="inputbg">
            <input type="checkbox" name="agree" id="agree-check">
            <span>我已充分阅读、理解并接受<span>隐私政策</span>的全部内容</span>
          </div>
          <div class="dis-box">
            <p><span :class="phoneClass">{{phonetip}}</span></p>
            <p><span :class="pwdClass">{{pwdtip}}</span></p>
            <p><span :class="repwdClass">{{repwdtip}}</span></p>

          </div>
          <div class="confirm" @click="regBtn">确认</div>
        </div>

      </div>
      <p class="go_login">已是会员？立即登录</p>
    </div>
  </div>

  <!-- 外部引入 -->
  <div class="footer"></div>
</body>

<script>
  $(".header").load("header.html");
  $(".footer").load("footer.html");
  new Vue({
    el: ".wrap",
    data: {
      phone: "",
      phoneReg: /^1[3-9]\d{9}$/,
      phonetip: "",
      phoneClass: "error",

      pwd: "",
      pwdtip: "",
      pwdReg: /^[\w$]{6,12}$/,
      pwdClass: "error",

      repwd: "",
      repwdtip: "",
      repwdClass: "error",
    },
    watch: {
      phone(str) {
        if (this.phoneReg.test(str)) {
          this.phonetip = "手机号正确";
          this.phoneClass = "success";
        } else {
          this.phonetip = "* 手机号码格式不正确";
          this.phoneClass = "error";
        }
      },
      pwd(str) {
        if (this.pwdReg.test(str)) {
          // this.pwdtip = "密码格式正确";
          // this.pwdClass = "success";

          var isExistNum = false;
          var isExistSmall = false;
          var isExistBig = false;
          var isExistSpe = false;

          if (/[0-9]/.test(str)) isExistNum = true;
          if (/[a-z]/.test(str)) isExistSmall = true;
          if (/[A-Z]/.test(str)) isExistBig = true;
          if (/[_$]/.test(str)) isExistSpe = true;

          var sum = isExistNum + isExistSmall + isExistBig + isExistSpe;

          switch (sum) {
            case 1:
              this.pwdtip = "密码强度:弱";
              this.pwdClass = "success";
              break;
            case 2:
              this.pwdtip = "密码强度:中";
              this.pwdClass = "success";
              break;
            case 3:
              this.pwdtip = "密码强度:强";
              this.pwdClass = "success";
              break;
            case 4:
              this.pwdtip = "密码强度:超强";
              this.pwdClass = "success";
              break;
          }
        } else {
          this.pwdtip = "* 密码由数字,大小写字母,下划线,$组成,6-12位";
          this.pwdClass = "error";
        }
      },
      repwd(str) {
        if (this.pwd == this.repwd) {
          this.repwdtip = "密码正确";
          this.repwdClass = "success";
        } else {
          this.repwdtip = "两次密码输入不一致";
          this.repwdClass = "error";
        }
      }
    },
    methods: {
      async regBtn() {
        if (this.phoneClass == "success" && this.pwdClass == "success" && this.repwdClass == "success") {

          let { data: list } = await axios({//查询
            method: "get",
            url: "http://localhost:2345/reginfos",
            params: {
              phone: this.phone,
            }
          })

          if (list.length) {
            alert("该用户已经存在");
          } else {
            let { data } = await axios({
              method: "post",
              url: "http://localhost:2345/reginfos",
              data: {
                phone: this.phone,
                pwd: this.pwd,
              }
            })
          }
          // alert("冲波666");
          window.location.href = "../html/login.html"
        }
      }
    },
  })
</script>

</html>